<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <!-- 把hobby先交给sing去处理得到一个结果 -->
        <!-- 再把结果又交给jump去处理,得到最终结果 -->
        <!-- 最终显示的结果一定是最后一个过滤器的结果 -->
        <p>{{ hobby | sing | jump | rap }}</p>
    </div>

    <script src="./vue.js"></script>

    <script>
        new Vue({
            el: '#app',
            data: {
                hobby: '我的兴趣是:'
            },

            // 写过滤器的地方
            filters: {

                sing (val) {

                    // console.log('jump过滤器调用了,原材料是',val)
                    return val + '唱'
                },

                jump (val) {
                    // 你给我一个原材料,我就返回一个原材料拼接跳
                    return val + ',跳'
                },

                rap (val) {

                    return val + ',rap'
                }
            }
        })
    </script>
</body>
</html>